<template>
    <view class="topHeadWrap" :style="headFixed && styles">
        <view class="topHead">
            <image class="leaf_arrow" :src="leafArrow" v-if="showBack" @click="goBack" />
            <view class="title" v-if="title">{{ title }}</view>
        </view>
    </view>
</template>
    
<script setup>
    import { reactive } from 'vue'
    import leafArrow from '@/static/images/leftArrow.png'

    const props = defineProps({
        // 展示返回按钮
        showBack: {
            type: Boolean,
            default: false
        },
        // 标题
        title: {
            type: String,
            default: ""
        },
        // 是否position: fixed固定在顶部
        headFixed: {
            type: Boolean,
            default: false
        }
    });
    const styles = reactive({
        position: 'fixed',
        top: 0,
        left: 0,
        width: '100%'
    })
    const topHeightRpx = uni.getStorageSync("topHeightRpx");
    const {stateHeightRpx, topGuheightRpx} = topHeightRpx;
    const systemH = stateHeightRpx+'rpx'; // 状态栏高度
    const topGuH = topGuheightRpx+'rpx'; // 顶部固定高度
    const botHeight = ((topGuheightRpx - 28) / 2 - 12).toFixed(0) + 'rpx'; // 返回按钮距离固定高度头部的底部距离.12为上下padding距离

    const goBack = () => {
        uni.navigateBack();
    }
</script>

<style lang="scss" scoped>
    .topHead {
        padding-top: v-bind(systemH);
        position: relative;
        .leaf_arrow {
            position: absolute;
            width: 14rpx;
            height: 28rpx;
            left: 12rpx;
            bottom: v-bind(botHeight);
            padding: 12rpx 20rpx;
        }
        .title {
            color: rgba(0,0,0,1);
            font-size: 32rpx;
            font-family: PingFangSC-Semibold;
            font-weight: 600;
            text-align: center;
            white-space: nowrap;
            line-height: v-bind(topGuH);
        }
    }
</style>